<template>
  <div class="container">
    <div class="image-wrapper" v-for="item in imageList" :key="item.id">
      <img :src="item.image" alt="" />
      <div class="hot-wrapper">
        <div
          v-for="(hotItem, hotIndex) in item.hotArea"
          :key="hotItem.id"
          class="hot-item"
          :style="{
            width: `${hotItem.width}px`,
            height: `${hotItem.height}px`,
            transform: `translate(${hotItem.x}px, ${hotItem.y}px)`,
          }"
          @click="navTo(hotItem.url)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import interact from 'interactjs';
//https://img30.360buyimg.com/sku/jfs/t1/271020/32/29381/106222/680ef32cF62dd8a18/6d21173b745d55e4.jpg.avif
//https://img30.360buyimg.com/sku/jfs/t1/282018/22/26522/122409/680a14b7Fdabcefa9/4105798a989ecc0a.jpg.avif
//https://img30.360buyimg.com/sku/jfs/t1/270508/18/27690/181812/680a14b7Ff072514a/a105e365757c8f74.jpg.avif
// eslint-disable-next-line no-undef
const result = JSON.parse(localStorage.getItem('imageList'));
const containerWidth = 500;
for (const item of result) {
  for (const hot of item.hotArea) {
    hot.x = hot.x * containerWidth;
    hot.y = hot.y * containerWidth;
    hot.width = hot.width * containerWidth;
    hot.height = hot.height * containerWidth;
  }
}
const imageList = result;

function navTo(url) {
  window.open(url, '_blank');
}
</script>

<style scoped lang="scss">
.container {
}

.image-wrapper {
  border: 2px dashed #094fd2;
  width: 500px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  font-size: 0;

  img {
    width: 100%;
  }
}

.hot-wrapper {
  //border: 1px dashed red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;

  .hot-item {
    background: #ff000000;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;

    &.active {
      outline: 2px dashed #094fd2;
    }
  }
}

.footer {
  text-align: center;
  margin-top: 20px;
}
</style>
